<!--

=========================================================
* Pixel Pro Bootstrap 4 UI Kit
=========================================================

* Product Page: https://themesberg.com/product/ui-kits/pixel-pro-premium-bootstrap-4-ui-kit
* Copyright 2019 Themesberg (https://www.themesberg.com)

* Coded by https://themesberg.com

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

-->
<!DOCTYPE html>
<html lang="en">

<head>
    @@include('./_head.html', {
        "path": "../..",
        "title": "Pixel Documentation - Forms, Inputs"
    })
</head>

<body>
    <a href="#doc-index" class="btn btn-lg btn-primary btn-block rounded-0 d-lg-none" data-toggle="collapse" data-target="#doc-index" aria-expanded="false" aria-controls="doc-index">
        <path d="M3 17C3 17.5523 3.44772 18 4 18H20C20.5523 18 21 17.5523 21 17V17C21 16.4477 20.5523 16 20 16H4C3.44772 16 3 16.4477 3 17V17ZM3 12C3 12.5523 3.44772 13 4 13H20C20.5523 13 21 12.5523 21 12V12C21 11.4477 20.5523 11 20 11H4C3.44772 11 3 11.4477 3 12V12ZM4 6C3.44772 6 3 6.44772 3 7V7C3 7.55228 3.44772 8 4 8H20C20.5523 8 21 7.55228 21 7V7C21 6.44772 20.5523 6 20 6H4Z"
        />
        </svg>
        <span class="h6 text-white">Menu</span>
    </a>
    <section class="container-fluid py-4">
        <div class="row">
            @@include('./_docs-sidebar.html', {
                "path": "../..",
                "docs-path": ".."
            })
            <!-- Content -->
            <div class="col-12 col-lg-10">
                <div class="row">
                    <div class="col-xl-10 col-lg-9 px-xl-5 px-lg-3 px-md-2 py-md-4">
                        <div class="border-bottom">
                            <h1>Forms</h1>
                            <p class="lead text-dark">Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms with the help of <a href="https://getbootstrap.com/docs/4.3/components/forms/">Bootstrap Forms</a>.</p>
                            <a href="https://getbootstrap.com/docs/4.3/components/forms/" target="_blank" class="btn btn-icon btn-primary mb-3">
                                <span class="btn-inner-icon"><i class="fas fa-info-circle"></i></span>
                                <span class="btn-inner-text">Bootstrap 4 documentation</span>
                            </a>
                        </div>
                        <div id="overview" class="my-5">
                            <h5 class="mb-3">Overview</h5>
                            <p>Bootstrap’s form controls expand on <a href="https://getbootstrap.com/docs/4.3/components/forms/">our
                                    Rebooted form styles</a> with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.</p>
                            <!-- Tab -->
                            <p>Be sure to use an appropriate <code class="text-danger">type</code> attribute on all inputs (e.g., <code class="text-danger">email</code> for email address or <code class="text-danger">number</code> for numerical information)
                                to take advantage of newer input controls like email verification, number selection, and more.</p>
                            <p>Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.</p>
                            <p>For more information, see <a href="https://getbootstrap.com/docs/4.3/components/forms/">Bootstrap
                                    Forms</a></p>
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-1" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-1" data-toggle="tab" href="#tab-content-1" role="tab" aria-controls="tab-link-1" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-2" data-toggle="tab" href="#tab-content-2" role="tab" aria-controls="tab-link-2" aria-selected="false">Html</a>
                                        </li>

                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent1">
                                            <div class="tab-pane fade show active" id="tab-content-1" role="tabpanel" aria-labelledby="tab-content-1">
                                                <form>
                                                    <div class="form-group">
                                                        <label for="exampleInputEmail1">Email address</label>
                                                        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                                                        <small id="emailHelp" class="form-text text-muted">We'll never
                                                            share your email with anyone else.</small>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="exampleInputPassword1">Password</label>
                                                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                                                    </div>
                                                    <div class="form-group form-check mb-3">
                                                        <label class="form-check-label">
                                                            <input class="form-check-input" type="checkbox">
                                                            <span class="form-check-sign"></span>
                                                            Check me out
                                                        </label>
                                                    </div>
                                                    <button type="submit" class="btn btn-primary">Submit</button>
                                                </form>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-2" role="tabpanel" aria-labelledby="tab-content-2">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;form&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;label for=&quot;exampleInputEmail1&quot;&gt;Email address&lt;/label&gt;
        &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;exampleInputEmail1&quot; aria-describedby=&quot;emailHelp&quot; placeholder=&quot;Enter email&quot;&gt;
        &lt;small id=&quot;emailHelp&quot; class=&quot;form-text text-muted&quot;&gt;We'll never share your email with anyone else.&lt;/small&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;label for=&quot;exampleInputPassword1&quot;&gt;Password&lt;/label&gt;
        &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;exampleInputPassword1&quot; placeholder=&quot;Password&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group form-check mb-3&quot;&gt;
        &lt;label class=&quot;form-check-label&quot;&gt;
            &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot;&gt;
            &lt;span class=&quot;form-check-sign&quot;&gt;&lt;/span&gt;
            Check me out
        &lt;/label&gt;
    &lt;/div&gt;
    &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Submit&lt;/button&gt;
&lt;/form&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="form-controls" class="my-5">
                            <h5 class="mb-3">Form Controls</h5>
                            <p>Textual form controls—like <code class="text-danger">&lt;input&gt;</code>, <code class="text-danger">&lt;select&gt;</code>, and <code class="text-danger">&lt;textarea&gt;</code>s—are styled with the <code class="text-danger">.form-control</code>                                class. Included are styles for general appearance, focus state, sizing, and more.</p>
                            <!-- Tab -->
                            <p>Be sure to explore our <a href="#custom-forms">custom forms</a> to further style <code class="text-danger">&lt;select&gt;</code>.</p>
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-2" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-3" data-toggle="tab" href="#tab-content-3" role="tab" aria-controls="tab-link-3" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-4" data-toggle="tab" href="#tab-content-4" role="tab" aria-controls="tab-link-4" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent2">
                                            <div class="tab-pane fade show active" id="tab-content-3" role="tabpanel" aria-labelledby="tab-content-3">
                                                <form>
                                                    <div class="form-group">
                                                        <label for="exampleFormControlInput1">Email address</label>
                                                        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="exampleFormControlSelect1">Example select</label>
                                                        <select class="custom-select" id="exampleFormControlSelect1">
                                                            <option>1</option>
                                                            <option>2</option>
                                                            <option>3</option>
                                                            <option>4</option>
                                                            <option>5</option>
                                                        </select>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="exampleFormControlSelect2">Example multiple select</label>
                                                        <select multiple class="custom-select" id="exampleFormControlSelect2">
                                                            <option>Bootstrap</option>
                                                            <option>VueJs</option>
                                                            <option>Angular</option>
                                                            <option>React</option>
                                                            <option>NodeJs</option>
                                                        </select>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="exampleFormControlTextarea2">Example textarea</label>
                                                        <textarea class="form-control" id="exampleFormControlTextarea2" rows="3"></textarea>
                                                    </div>
                                                </form>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-4" role="tabpanel" aria-labelledby="tab-content-4">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;form&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;label for=&quot;exampleFormControlInput1&quot;&gt;Email address&lt;/label&gt;
        &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;exampleFormControlInput1&quot; placeholder=&quot;name@example.com&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;label for=&quot;exampleFormControlSelect1&quot;&gt;Example select&lt;/label&gt;
        &lt;select class=&quot;custom-select&quot; id=&quot;exampleFormControlSelect1&quot;&gt;
        &lt;option&gt;1&lt;/option&gt;
        &lt;option&gt;2&lt;/option&gt;
        &lt;option&gt;3&lt;/option&gt;
        &lt;option&gt;4&lt;/option&gt;
        &lt;option&gt;5&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;label for=&quot;exampleFormControlSelect2&quot;&gt;Example multiple select&lt;/label&gt;
        &lt;select multiple class=&quot;custom-select&quot; id=&quot;exampleFormControlSelect2&quot;&gt;
        &lt;option&gt;Bootstrap&lt;/option&gt;
        &lt;option&gt;VueJs&lt;/option&gt;
        &lt;option&gt;Angular&lt;/option&gt;
        &lt;option&gt;React&lt;/option&gt;
        &lt;option&gt;NodeJs&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;label for=&quot;exampleFormControlTextarea2&quot;&gt;Example textarea&lt;/label&gt;
        &lt;textarea class=&quot;form-control&quot; id=&quot;exampleFormControlTextarea2&quot; rows=&quot;3&quot;&gt;&lt;/textarea&gt;
    &lt;/div&gt;
&lt;/form&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <p>For file inputs, swap the <code class="text-danger">.form-control</code> for <code class="text-danger">.form-control-file</code>.</p>
                                <form>
                                    <div class="form-group">
                                        <label for="exampleFormControlFile1">Example file input</label>
                                        <input type="file" class="form-control-file" id="exampleFormControlFile1">
                                    </div>
                                </form>
                                <p>Or you can use this:</p>
                                <form>
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input" id="customFile">
                                        <label class="custom-file-label" for="customFile">Choose file</label>
                                    </div>
                                </form>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="sizing" class="my-5">
                            <h5 class="mb-3">Sizing</h5>
                            <p>Set heights using classes like <code class="text-danger">.form-control-lg</code> and
                                <code class="text-danger">.form-control-sm</code>.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-3" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-5" data-toggle="tab" href="#tab-content-5" role="tab" aria-controls="tab-link-5" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-6" data-toggle="tab" href="#tab-content-6" role="tab" aria-controls="tab-link-6" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent3">
                                            <div class="tab-pane fade show active" id="tab-content-5" role="tabpanel" aria-labelledby="tab-content-5">
                                                <input class="form-control form-control-lg mb-3" type="text" placeholder=".form-control-lg">
                                                <input class="form-control mb-3" type="text" placeholder="Default input">
                                                <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-6" role="tabpanel" aria-labelledby="tab-content-6">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;input class=&quot;form-control form-control-lg mb-3&quot; type=&quot;text&quot; placeholder=&quot;.form-control-lg&quot;&gt;
&lt;input class=&quot;form-control mb-3&quot; type=&quot;text&quot; placeholder=&quot;Default input&quot;&gt;
&lt;input class=&quot;form-control form-control-sm&quot; type=&quot;text&quot; placeholder=&quot;.form-control-sm&quot;&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="custom-form" class="my-5">
                            <h5 class="mb-3">Custom form</h5>
                            <p>Pixel customizes Bootstrap's forms, adds some styles to them along with <code class="text-danger">.form-control-shadow</code> and <code class="text-danger">.input-group-shadow</code> classes.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-4" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-7" data-toggle="tab" href="#tab-content-7" role="tab" aria-controls="tab-link-7" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-8" data-toggle="tab" href="#tab-content-8" role="tab" aria-controls="tab-link-8" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0">
                                        <div class="tab-content" id="tabcontent4">
                                            <div class="tab-pane fade show active bg-tertiary py-5" id="tab-content-7" role="tabpanel" aria-labelledby="tab-content-7">
                                                <div class="col-md-10 mx-auto">
                                                    <form>
                                                        <!-- Form -->
                                                        <div class="form-group mb-4">
                                                            <input type="text" placeholder="Default" class="form-control form-control-shadow" />
                                                        </div>
                                                        <!-- End of Form -->
                                                        <!-- Form -->
                                                        <div class="form-group mb-4">
                                                            <div class="input-group input-group-shadow">
                                                                <div class="input-group-prepend">
                                                                    <span class="input-group-text"><i class="fas fa-search"></i></span>
                                                                </div>
                                                                <input class="form-control" placeholder="Icon Left" type="text">
                                                            </div>
                                                        </div>
                                                        <!-- End of Form -->
                                                        <!-- Form -->
                                                        <div class="form-group mb-4">
                                                            <div class="input-group input-group-shadow">
                                                                <input class="form-control" placeholder="Icon Right" type="text">
                                                                <div class="input-group-append">
                                                                    <span class="input-group-text"><i class="fas fa-search"></i></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- End of Form -->
                                                        <!-- Form -->
                                                        <div class="form-group mb-4">
                                                            <div class="input-group input-group-shadow">
                                                                <input class="form-control" placeholder="Password" type="password">
                                                                <div class="input-group-append">
                                                                    <span class="input-group-text"><i class="fas fa-unlock-alt"></i></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- End of Form -->
                                                        <!-- Form -->
                                                        <div class="custom-file mb-4">
                                                            <input type="file" class="custom-file-input" id="customFile2">
                                                            <label class="custom-file-label form-control-shadow" for="customFile2">Choose
                                                                file</label>
                                                        </div>
                                                        <!-- End of Form -->
                                                        <!-- Form -->
                                                        <div class="form-group mb-4">
                                                            <input type="text" placeholder="Disabled" class="form-control form-control-shadow" disabled />
                                                        </div>
                                                        <!-- End of Form -->
                                                        <!-- Form -->
                                                        <div class="form-group mb-4">
                                                            <textarea class="form-control form-control-shadow" placeholder="Enter your message..." id="exampleFormControlTextarea1" rows="4"></textarea>
                                                        </div>
                                                        <!-- End of Form -->
                                                        <!-- Form -->
                                                        <div class="form-group has-success shadow-group-success mb-4">
                                                            <input type="text" placeholder="Success Input" class="form-control is-valid" />
                                                        </div>
                                                        <!-- End of Form -->
                                                        <!-- Form -->
                                                        <div class="form-group has-danger shadow-group-danger mb-4">
                                                            <input type="email" placeholder="Error Input" class="form-control is-invalid" />
                                                        </div>
                                                        <!-- End of Form -->
                                                        <!-- Form -->
                                                        <div class="form-group">
                                                            <select class="custom-select form-control-shadow mr-sm-2" id="inlineFormCustomSelect2">
                                                                <option>Select your country</option>
                                                                <option>Italia</option>
                                                                <option>USA</option>
                                                                <option>England</option>
                                                                <option>France</option>
                                                            </select>
                                                        </div>
                                                        <!-- End of Form -->
                                                    </form>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-8" role="tabpanel" aria-labelledby="tab-content-8">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;form&gt;
    &lt;!-- Form --&gt;
    &lt;div class=&quot;form-group mb-4&quot;&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;Default&quot; class=&quot;form-control form-control-shadow&quot; /&gt;
    &lt;/div&gt;
    &lt;!-- End of Form --&gt;
    &lt;!-- Form --&gt;
    &lt;div class=&quot;form-group mb-4&quot;&gt;
        &lt;div class=&quot;input-group input-group-shadow&quot;&gt;
            &lt;div class=&quot;input-group-prepend&quot;&gt;
                &lt;span class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;fas fa-search&quot;&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;/div&gt;
            &lt;input class=&quot;form-control&quot; placeholder=&quot;Icon Left&quot; type=&quot;text&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- End of Form --&gt;
    &lt;!-- Form --&gt;
    &lt;div class=&quot;form-group mb-4&quot;&gt;
        &lt;div class=&quot;input-group input-group-shadow&quot;&gt;
            &lt;input class=&quot;form-control&quot; placeholder=&quot;Icon Right&quot; type=&quot;text&quot;&gt;
            &lt;div class=&quot;input-group-append&quot;&gt;
                &lt;span class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;fas fa-search&quot;&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- End of Form --&gt;
    &lt;!-- Form --&gt;
    &lt;div class=&quot;form-group mb-4&quot;&gt;
        &lt;div class=&quot;input-group input-group-shadow&quot;&gt;
            &lt;input class=&quot;form-control&quot; placeholder=&quot;Password&quot; type=&quot;password&quot;&gt;
            &lt;div class=&quot;input-group-append&quot;&gt;
                &lt;span class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;fas fa-unlock-alt&quot;&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- End of Form --&gt;
    &lt;!-- Form --&gt;
    &lt;div class=&quot;custom-file mb-4&quot;&gt;
        &lt;input type=&quot;file&quot; class=&quot;custom-file-input&quot; id=&quot;customFile2&quot;&gt;
        &lt;label class=&quot;custom-file-label form-control-shadow&quot; for=&quot;customFile2&quot;&gt;Choose file&lt;/label&gt;
    &lt;/div&gt;
    &lt;!-- End of Form --&gt;
    &lt;!-- Form --&gt;
    &lt;div class=&quot;form-group mb-4&quot;&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;Disabled&quot; class=&quot;form-control form-control-shadow&quot; disabled /&gt;
    &lt;/div&gt;
    &lt;!-- End of Form --&gt;
    &lt;!-- Form --&gt;
    &lt;div class=&quot;form-group mb-4&quot;&gt;
        &lt;textarea class=&quot;form-control form-control-shadow&quot; placeholder=&quot;Enter your message...&quot; id=&quot;exampleFormControlTextarea1&quot; rows=&quot;4&quot;&gt;&lt;/textarea&gt;
    &lt;/div&gt;
    &lt;!-- End of Form --&gt;
    &lt;!-- Form --&gt;
    &lt;div class=&quot;form-group has-success shadow-group-success mb-4&quot;&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;Success Input&quot; class=&quot;form-control is-valid&quot; /&gt;
    &lt;/div&gt;
    &lt;!-- End of Form --&gt;
    &lt;!-- Form --&gt;
    &lt;div class=&quot;form-group has-danger shadow-group-danger mb-4&quot;&gt;
        &lt;input type=&quot;email&quot; placeholder=&quot;Error Input&quot; class=&quot;form-control is-invalid&quot; /&gt;
    &lt;/div&gt;
    &lt;!-- End of Form --&gt;
    &lt;!-- Form --&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;select class=&quot;custom-select form-control-shadow mr-sm-2&quot; id=&quot;inlineFormCustomSelect2&quot;&gt;
            &lt;option&gt;Select your country&lt;/option&gt;
            &lt;option&gt;Italia&lt;/option&gt;
            &lt;option&gt;USA&lt;/option&gt;
            &lt;option&gt;England&lt;/option&gt;
            &lt;option&gt;France&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
    &lt;!-- End of Form --&gt;
&lt;/form&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="checkboxes-and-radios" class="my-5">
                            <h5 class="mb-3">Checkboxes and radios</h5>
                            <p>Default checkboxes and radios are improved upon with the help of <code class="text-danger">.form-check</code>,
                                <strong>a single class for both input types that improves the layout and behavior of
                                    their HTML elements</strong>. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p>
                            <!-- Tab -->
                            <p>Disabled checkboxes and radios are supported. The <code class="text-danger">disabled</code> attribute will apply a lighter color to help indicate the input’s state.</p>
                            <p>Checkboxes and radios use are built to support HTML-based form validation and provide concise, accessible labels. As such, our <code class="text-danger">&lt;input&gt;</code> and <code class="text-danger">&lt;label&gt;</code>                                are sibling elements as opposed to an <code class="text-danger">&lt;input&gt;</code> within a <code class="text-danger">&lt;label&gt;</code>. This is slightly more verbose as you must specify <code class="text-danger">id</code>                                and <code class="text-danger">for</code> attributes to relate the <code class="text-danger">&lt;input&gt;</code> and <code class="text-danger">&lt;label&gt;</code>.</p>
                            <h6 class="mt-5">Square</h6>
                            <div class="my-4">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-6" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-11" data-toggle="tab" href="#tab-content-11" role="tab" aria-controls="tab-link-11" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-12" data-toggle="tab" href="#tab-content-12" role="tab" aria-controls="tab-link-12" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent6">
                                            <div class="tab-pane fade show active" id="tab-content-11" role="tabpanel" aria-labelledby="tab-content-11">
                                                <!-- Checkbox -->
                                                <div class="form-check mb-3">
                                                    <label class="form-check-label">
                                                        <input class="form-check-input" type="checkbox">
                                                        <span class="form-check-sign"></span>
                                                        Unchecked
                                                    </label>
                                                </div>
                                                <!-- End of Checkbox -->
                                                <!-- Checkbox -->
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                        <input class="form-check-input" type="checkbox" checked>
                                                        <span class="form-check-sign"></span>
                                                        Checked
                                                    </label>
                                                </div>
                                                <!-- End of Checkbox -->
                                                <!-- Checkbox -->
                                                <div class="form-check disabled">
                                                    <label class="form-check-label">
                                                        <input class="form-check-input" type="checkbox" disabled>
                                                        <span class="form-check-sign"></span>
                                                        Disabled Unchecked
                                                    </label>
                                                </div>
                                                <!-- End of Checkbox -->
                                                <!-- Checkbox -->
                                                <div class="form-check disabled">
                                                    <label class="form-check-label">
                                                        <input class="form-check-input" type="checkbox" checked
                                                            disabled>
                                                        <span class="form-check-sign"></span>
                                                        Disabled Checked
                                                    </label>
                                                </div>
                                                <!-- End of Checkbox -->
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-12" role="tabpanel" aria-labelledby="tab-content-12">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!-- Checkbox --&gt;
&lt;div class=&quot;form-check mb-3&quot;&gt;
    &lt;label class=&quot;form-check-label&quot;&gt;
        &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot;&gt;
        &lt;span class=&quot;form-check-sign&quot;&gt;&lt;/span&gt;
        Unchecked
    &lt;/label&gt;
&lt;/div&gt;
&lt;!-- End of Checkbox --&gt;
&lt;!-- Checkbox --&gt;
&lt;div class=&quot;form-check&quot;&gt;
    &lt;label class=&quot;form-check-label&quot;&gt;
        &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; checked&gt;
        &lt;span class=&quot;form-check-sign&quot;&gt;&lt;/span&gt;
        Checked
    &lt;/label&gt;
&lt;/div&gt;
&lt;!-- End of Checkbox --&gt;
&lt;!-- Checkbox --&gt;
&lt;div class=&quot;form-check disabled&quot;&gt;
    &lt;label class=&quot;form-check-label&quot;&gt;
        &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; disabled&gt;
        &lt;span class=&quot;form-check-sign&quot;&gt;&lt;/span&gt;
        Disabled Unchecked
    &lt;/label&gt;
&lt;/div&gt;
&lt;!-- End of Checkbox --&gt;
&lt;!-- Checkbox --&gt;
&lt;div class=&quot;form-check disabled&quot;&gt;
    &lt;label class=&quot;form-check-label&quot;&gt;
        &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; checked disabled&gt;
        &lt;span class=&quot;form-check-sign&quot;&gt;&lt;/span&gt;
        Disabled Checked
    &lt;/label&gt;
&lt;/div&gt;
&lt;!-- End of Checkbox --&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="round-checkbox" class="my-5">
                            <h6 class="mt-5">Round</h6>
                            <!-- Tab -->
                            <div class="my-4">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-7" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-13" data-toggle="tab" href="#tab-content-13" role="tab" aria-controls="tab-link-13" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-14" data-toggle="tab" href="#tab-content-14" role="tab" aria-controls="tab-link-14" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent7">
                                            <div class="tab-pane fade show active" id="tab-content-13" role="tabpanel" aria-labelledby="tab-content-13">
                                                <!-- Checkbox -->
                                                <div class="form-check round-check mb-3">
                                                    <label class="form-check-label">
                                                        <input class="form-check-input" type="checkbox">
                                                        <span class="form-check-sign"></span>
                                                        Unchecked
                                                    </label>
                                                </div>
                                                <!-- End of Checkbox -->
                                                <!-- Checkbox -->
                                                <div class="form-check round-check">
                                                    <label class="form-check-label">
                                                        <input class="form-check-input" type="checkbox" checked>
                                                        <span class="form-check-sign"></span>
                                                        Checked
                                                    </label>
                                                </div>
                                                <!-- End of Checkbox -->
                                                <!-- Checkbox -->
                                                <div class="form-check round-check disabled">
                                                    <label class="form-check-label">
                                                        <input class="form-check-input" type="checkbox" disabled>
                                                        <span class="form-check-sign"></span>
                                                        Disabled Unchecked
                                                    </label>
                                                </div>
                                                <!-- End of Checkbox -->
                                                <!-- Checkbox -->
                                                <div class="form-check round-check disabled">
                                                    <label class="form-check-label">
                                                        <input class="form-check-input" type="checkbox" checked
                                                            disabled>
                                                        <span class="form-check-sign"></span>
                                                        Disabled Checked
                                                    </label>
                                                </div>
                                                <!-- End of Checkbox -->
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-14" role="tabpanel" aria-labelledby="tab-content-14">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!-- Checkbox --&gt;
&lt;div class=&quot;form-check round-check mb-3&quot;&gt;
    &lt;label class=&quot;form-check-label&quot;&gt;
        &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot;&gt;
        &lt;span class=&quot;form-check-sign&quot;&gt;&lt;/span&gt;
        Unchecked
    &lt;/label&gt;
&lt;/div&gt;
&lt;!-- End of Checkbox --&gt;
&lt;!-- Checkbox --&gt;
&lt;div class=&quot;form-check round-check&quot;&gt;
    &lt;label class=&quot;form-check-label&quot;&gt;
        &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; checked&gt;
        &lt;span class=&quot;form-check-sign&quot;&gt;&lt;/span&gt;
        Checked
    &lt;/label&gt;
&lt;/div&gt;
&lt;!-- End of Checkbox --&gt;
&lt;!-- Checkbox --&gt;
&lt;div class=&quot;form-check round-check disabled&quot;&gt;
    &lt;label class=&quot;form-check-label&quot;&gt;
        &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; disabled&gt;
        &lt;span class=&quot;form-check-sign&quot;&gt;&lt;/span&gt;
        Disabled Unchecked
    &lt;/label&gt;
&lt;/div&gt;
&lt;!-- End of Checkbox --&gt;
&lt;!-- Checkbox --&gt;
&lt;div class=&quot;form-check round-check disabled&quot;&gt;
    &lt;label class=&quot;form-check-label&quot;&gt;
        &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; checked disabled&gt;
        &lt;span class=&quot;form-check-sign&quot;&gt;&lt;/span&gt;
        Disabled Checked
    &lt;/label&gt;
&lt;/div&gt;
&lt;!-- End of Checkbox --&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="radio" class="my-5">
                            <h5 class="mb-3">Radio</h5>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-8" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-15" data-toggle="tab" href="#tab-content-15" role="tab" aria-controls="tab-link-15" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-16" data-toggle="tab" href="#tab-content-16" role="tab" aria-controls="tab-link-16" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent8">
                                            <div class="tab-pane fade show active" id="tab-content-15" role="tabpanel" aria-labelledby="tab-content-15">
                                                <!-- Radio -->
                                                <div class="form-check form-check-radio">
                                                    <label class="form-check-label">
                                                        <input class="form-check-input" type="radio" name="exampleRadios"
                                                            id="exampleRadios1" value="option1">
                                                        <span class="form-check-sign"></span>
                                                        Radio is off
                                                    </label>
                                                </div>
                                                <!-- End of Radio -->
                                                <!-- Radio -->
                                                <div class="form-check form-check-radio">
                                                    <label class="form-check-label">
                                                        <input class="form-check-input" type="radio" name="exampleRadios"
                                                            id="exampleRadios2" value="option2" checked>
                                                        <span class="form-check-sign"></span>
                                                        Radio is on
                                                    </label>
                                                </div>
                                                <!-- End of Radio -->
                                                <!-- Radio -->
                                                <div class="form-check form-check-radio disabled">
                                                    <label class="form-check-label">
                                                        <input class="form-check-input" type="radio" name="exampleRadios1"
                                                            id="exampleRadios3" value="option3" disabled>
                                                        <span class="form-check-sign"></span>
                                                        Disabled radio is off
                                                    </label>
                                                </div>
                                                <!-- End of Radio -->
                                                <!-- Radio -->
                                                <div class="form-check form-check-radio disabled">
                                                    <label class="form-check-label">
                                                        <input class="form-check-input" type="radio" name="exampleRadios1"
                                                            id="exampleRadios4" value="option4" disabled checked>
                                                        <span class="form-check-sign"></span>
                                                        Disabled radio is on
                                                    </label>
                                                </div>
                                                <!-- End of Radio -->
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-16" role="tabpanel" aria-labelledby="tab-content-16">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!-- Radio --&gt;
&lt;div class=&quot;form-check form-check-radio&quot;&gt;
    &lt;label class=&quot;form-check-label&quot;&gt;
        &lt;input class=&quot;form-check-input&quot; type=&quot;radio&quot; name=&quot;exampleRadios&quot; id=&quot;exampleRadios1&quot; value=&quot;option1&quot;&gt;
        &lt;span class=&quot;form-check-sign&quot;&gt;&lt;/span&gt;
        Radio is off
    &lt;/label&gt;
&lt;/div&gt;
&lt;!-- End of Radio --&gt;
&lt;!-- Radio --&gt;
&lt;div class=&quot;form-check form-check-radio&quot;&gt;
    &lt;label class=&quot;form-check-label&quot;&gt;
        &lt;input class=&quot;form-check-input&quot; type=&quot;radio&quot; name=&quot;exampleRadios&quot; id=&quot;exampleRadios2&quot; value=&quot;option2&quot; checked&gt;
        &lt;span class=&quot;form-check-sign&quot;&gt;&lt;/span&gt;
        Radio is on
    &lt;/label&gt;
&lt;/div&gt;
&lt;!-- End of Radio --&gt;
&lt;!-- Radio --&gt;
&lt;div class=&quot;form-check form-check-radio disabled&quot;&gt;
    &lt;label class=&quot;form-check-label&quot;&gt;
        &lt;input class=&quot;form-check-input&quot; type=&quot;radio&quot; name=&quot;exampleRadios1&quot; id=&quot;exampleRadios3&quot; value=&quot;option3&quot; disabled&gt;
        &lt;span class=&quot;form-check-sign&quot;&gt;&lt;/span&gt;
        Disabled radio is off
    &lt;/label&gt;
&lt;/div&gt;
&lt;!-- End of Radio --&gt;
&lt;!-- Radio --&gt;
&lt;div class=&quot;form-check form-check-radio disabled&quot;&gt;
    &lt;label class=&quot;form-check-label&quot;&gt;
        &lt;input class=&quot;form-check-input&quot; type=&quot;radio&quot; name=&quot;exampleRadios1&quot; id=&quot;exampleRadios4&quot; value=&quot;option4&quot; disabled checked&gt;
        &lt;span class=&quot;form-check-sign&quot;&gt;&lt;/span&gt;
        Disabled radio is on
    &lt;/label&gt;
&lt;/div&gt;
&lt;!-- End of Radio --&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="custom-switch" class="my-5">
                            <h5 class="mb-3">Switch</h5>
                            <p>A switch has the markup of a custom checkbox but uses the <code class="highlighter-rouge">.custom-switch</code> class to render a toggle switch. custom-switch also support the <code class="highlighter-rouge">disabled</code>                                attribute.
                            </p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-9" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-17" data-toggle="tab" href="#tab-content-17" role="tab" aria-controls="tab-link-17" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-18" data-toggle="tab" href="#tab-content-18" role="tab" aria-controls="tab-link-18" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent9">
                                            <div class="tab-pane fade show active" id="tab-content-17" role="tabpanel" aria-labelledby="tab-content-17">
                                                <div class="custom-control custom-switch">
                                                    <input type="checkbox" class="custom-control-input" id="customSwitch1">
                                                    <label class="custom-control-label" for="customSwitch1">Unchecked</label>
                                                </div>
                                                <div class="custom-control custom-switch">
                                                    <input type="checkbox" class="custom-control-input" checked id="customSwitch2">
                                                    <label class="custom-control-label" for="customSwitch2">Checked</label>
                                                </div>
                                                <div class="custom-control custom-switch">
                                                    <input type="checkbox" class="custom-control-input" disabled id="customSwitch3">
                                                    <label class="custom-control-label" for="customSwitch3">Disabled
                                                        switch element</label>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-18" role="tabpanel" aria-labelledby="tab-content-18">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;div class=&quot;custom-control custom-switch&quot;&gt;
    &lt;input type=&quot;checkbox&quot; class=&quot;custom-control-input&quot; id=&quot;customSwitch1&quot;&gt;
    &lt;label class=&quot;custom-control-label&quot; for=&quot;customSwitch1&quot;&gt;Unchecked&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;custom-control custom-switch&quot;&gt;
    &lt;input type=&quot;checkbox&quot; class=&quot;custom-control-input&quot; checked id=&quot;customSwitch2&quot;&gt;
    &lt;label class=&quot;custom-control-label&quot; for=&quot;customSwitch2&quot;&gt;Checked&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;custom-control custom-switch&quot;&gt;
    &lt;input type=&quot;checkbox&quot; class=&quot;custom-control-input&quot; disabled id=&quot;customSwitch3&quot;&gt;
    &lt;label class=&quot;custom-control-label&quot; for=&quot;customSwitch3&quot;&gt;Disabled switch element&lt;/label&gt;
&lt;/div&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="range-sliders" class="my-5">
                            <h5 class="mb-3">Range Sliders</h5>
                            <p>noUiSlider is a <strong>lightweight</strong> range slider with multi-touch support and a ton of <strong>features</strong>. It supports non-linear ranges, requires no external dependencies, has keyboard support, and it works
                                great in <strong>responsive designs</strong>. Have you tried this documentation on your phone?</p>
                            <!-- Tab -->
                            <p>For more detailed information and examples, see the official documentation: <a href="https://refreshless.com/nouislider/">noUiSlider
                                    doccumentation</a>.</p>
                            <p>Copy-paste the following <code class="text-danger">&lt;script&gt;</code> near the end of your pages to enable it.</p>
                            <div>
                                <pre class="bg-white">
                                        <code class="language-html">
&lt;script src=&quot;../../node_modules/nouislider/distribute/nouislider.min.js&quot;&gt;&lt;/script&gt;
                                        </code>
                                    </pre>
                            </div>
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-10" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-19" data-toggle="tab" href="#tab-content-19" role="tab" aria-controls="tab-link-19" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-20" data-toggle="tab" href="#tab-content-20" role="tab" aria-controls="tab-link-20" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent10">
                                            <div class="tab-pane fade show active" id="tab-content-19" role="tabpanel" aria-labelledby="tab-content-19">
                                                <div class="row mt-5">
                                                    <div class="col-lg-6 col-sm-6 mt-4 mt-md-0">
                                                        <!-- Simple slider -->
                                                        <div class="input-slider-container">
                                                            <div id="input-slider" class="input-slider" data-range-value-min="100" data-range-value-max="500"></div>
                                                            <!-- Input slider values -->
                                                            <div class="row mt-3 d-none">
                                                                <div class="col-6">
                                                                    <span id="input-slider-value" class="range-slider-value" data-range-value-low="200"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- End of Slider -->
                                                    </div>
                                                    <div class="col-lg-6 col-sm-6">
                                                        <!-- Range slider  -->
                                                        <div id="input-slider-range" data-range-value-min="100" data-range-value-max="500"></div>
                                                        <!-- Range slider values -->
                                                        <div class="row d-none">
                                                            <div class="col-6">
                                                                <span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low"></span>
                                                            </div>
                                                            <div class="col-6 text-right">
                                                                <span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high"></span>
                                                            </div>
                                                        </div>
                                                        <!-- End of range slider values -->
                                                    </div>
                                                </div>
                                                <div class="row mt-5">
                                                    <div class="col-lg-6 col-sm-6">
                                                        <!-- Range slider  -->
                                                        <div id="input-slider-range-2" data-range-value-min="100" data-range-value-max="500"></div>
                                                        <!-- Range slider values -->
                                                        <div class="row d-none">
                                                            <div class="col-6">
                                                                <span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low-2"></span>
                                                            </div>
                                                            <div class="col-6 text-right">
                                                                <span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high-2"></span>
                                                            </div>
                                                        </div>
                                                        <!-- End of range slider values -->
                                                    </div>
                                                    <div class="col-lg-2 col-sm-6 offset-md-2">
                                                        <!-- Vertical Range -->
                                                        <div id="input-slider-vertical-1" data-range-value-min="100" data-range-value-max="500"></div>
                                                        <!-- Range slider values -->
                                                        <div class="row d-none">
                                                            <div class="col-6">
                                                                <span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low-3"></span>
                                                            </div>
                                                            <div class="col-6 text-right">
                                                                <span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high-3"></span>
                                                            </div>
                                                        </div>
                                                        <!-- End of range slider values -->
                                                    </div>
                                                    <div class="col-lg-2 col-sm-6">
                                                        <!-- Vertical Range -->
                                                        <div id="input-slider-vertical-2" data-range-value-min="100" data-range-value-max="500"></div>
                                                        <!-- Range slider values -->
                                                        <div class="row d-none">
                                                            <div class="col-6">
                                                                <span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low-4"></span>
                                                            </div>
                                                            <div class="col-6 text-right">
                                                                <span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high-4"></span>
                                                            </div>
                                                        </div>
                                                        <!-- End of range slider values -->
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-20" role="tabpanel" aria-labelledby="tab-content-20">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!-- Simple slider --&gt;
&lt;div class=&quot;input-slider-container&quot;&gt;
    &lt;div id=&quot;input-slider&quot; class=&quot;input-slider&quot; data-range-value-min=&quot;100&quot; data-range-value-max=&quot;500&quot;&gt;&lt;/div&gt;
    &lt;!-- Input slider values --&gt;
    &lt;div class=&quot;row mt-3 d-none&quot;&gt;
        &lt;div class=&quot;col-6&quot;&gt;
            &lt;span id=&quot;input-slider-value&quot; class=&quot;range-slider-value&quot; data-range-value-low=&quot;200&quot;&gt;&lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End of Slider --&gt;
&lt;!-- Range slider  --&gt;
&lt;div id=&quot;input-slider-range&quot; data-range-value-min=&quot;100&quot; data-range-value-max=&quot;500&quot;&gt;&lt;/div&gt;
&lt;!-- Range slider values --&gt;
&lt;div class=&quot;row d-none&quot;&gt;
    &lt;div class=&quot;col-6&quot;&gt;
        &lt;span class=&quot;range-slider-value value-low&quot; data-range-value-low=&quot;200&quot; id=&quot;input-slider-range-value-low&quot;&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-6 text-right&quot;&gt;
        &lt;span class=&quot;range-slider-value value-high&quot; data-range-value-high=&quot;400&quot; id=&quot;input-slider-range-value-high&quot;&gt;&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End of range slider values --&gt;
&lt;!-- Range slider  --&gt;
&lt;div id=&quot;input-slider-range-2&quot; data-range-value-min=&quot;100&quot; data-range-value-max=&quot;500&quot;&gt;&lt;/div&gt;
&lt;!-- Range slider values --&gt;
&lt;div class=&quot;row d-none&quot;&gt;
    &lt;div class=&quot;col-6&quot;&gt;
        &lt;span class=&quot;range-slider-value value-low&quot; data-range-value-low=&quot;200&quot; id=&quot;input-slider-range-value-low-2&quot;&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-6 text-right&quot;&gt;
        &lt;span class=&quot;range-slider-value value-high&quot; data-range-value-high=&quot;400&quot; id=&quot;input-slider-range-value-high-2&quot;&gt;&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End of range slider values --&gt;
&lt;!-- Vertical Range --&gt;
&lt;div id=&quot;input-slider-vertical-1&quot; data-range-value-min=&quot;100&quot; data-range-value-max=&quot;500&quot;&gt;&lt;/div&gt;
&lt;!-- Range slider values --&gt;
&lt;div class=&quot;row d-none&quot;&gt;
    &lt;div class=&quot;col-6&quot;&gt;
        &lt;span class=&quot;range-slider-value value-low&quot; data-range-value-low=&quot;200&quot; id=&quot;input-slider-range-value-low-3&quot;&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-6 text-right&quot;&gt;
        &lt;span class=&quot;range-slider-value value-high&quot; data-range-value-high=&quot;400&quot; id=&quot;input-slider-range-value-high-3&quot;&gt;&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End of range slider values --&gt;
&lt;!-- Vertical Range --&gt;
&lt;div id=&quot;input-slider-vertical-2&quot; data-range-value-min=&quot;100&quot; data-range-value-max=&quot;500&quot;&gt;&lt;/div&gt;
&lt;!-- Range slider values --&gt;
&lt;div class=&quot;row d-none&quot;&gt;
    &lt;div class=&quot;col-6&quot;&gt;
        &lt;span class=&quot;range-slider-value value-low&quot; data-range-value-low=&quot;200&quot; id=&quot;input-slider-range-value-low-4&quot;&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-6 text-right&quot;&gt;
        &lt;span class=&quot;range-slider-value value-high&quot; data-range-value-high=&quot;400&quot; id=&quot;input-slider-range-value-high-4&quot;&gt;&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End of range slider values --&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="tags-input" class="my-5">
                            <h5 class="mb-3">Tags input</h5>
                            <p>Bootstrap Tags Input is a jQuery plugin providing a Twitter Bootstrap user interface for managing tags.</p>
                            <p>For more detailed information and examples, see the official documentation: <a href="https://github.com/bootstrap-tagsinput/bootstrap-tagsinput">Bootstrap-tagsinput</a>.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-11" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-21" data-toggle="tab" href="#tab-content-21" role="tab" aria-controls="tab-link-21" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-22" data-toggle="tab" href="#tab-content-22" role="tab" aria-controls="tab-link-22" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent11">
                                            <div class="tab-pane fade show active" id="tab-content-21" role="tabpanel" aria-labelledby="tab-content-21">
                                                <!-- Tags Input -->
                                                <input type="text" class="form-control" value="Bootstrap,Angular,Vue,Wordpress,React,Java,Php,Gulp" data-role="tagsinput" />
                                                <!-- End of Tags Input -->
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-22" role="tabpanel" aria-labelledby="tab-content-22">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!-- Tags Input --&gt;
&lt;input type=&quot;text&quot; class=&quot;form-control&quot; value=&quot;Bootstrap,Angular,Vue,Wordpress,React,Java,Php,Gulp&quot; data-role=&quot;tagsinput&quot; /&gt;
&lt;!-- End of Tags Input --&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="complex-layout" class="my-5">
                            <p>More complex layouts can also be created with the grid system.</p>
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-12" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-23" data-toggle="tab" href="#tab-content-23" role="tab" aria-controls="tab-link-23" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-24" data-toggle="tab" href="#tab-content-24" role="tab" aria-controls="tab-link-24" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent12">
                                            <div class="tab-pane fade show active" id="tab-content-23" role="tabpanel" aria-labelledby="tab-content-23">
                                                <form>
                                                    <div class="form-row">
                                                        <div class="form-group col-md-6">
                                                            <div class="input-group">
                                                                <div class="input-group-prepend">
                                                                    <span class="input-group-text"><i class="fas fa-at"></i></span>
                                                                </div>
                                                                <input class="form-control" placeholder="Email" type="email">
                                                            </div>
                                                        </div>
                                                        <div class="form-group col-md-6">
                                                            <div class="input-group">
                                                                <div class="input-group-prepend">
                                                                    <span class="input-group-text"><i class="fas fa-unlock-alt"></i></span>
                                                                </div>
                                                                <input class="form-control" placeholder="Password" type="password">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="inputAddress">Address</label>
                                                        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Timisoara St">
                                                    </div>
                                                    <div class="form-row">
                                                        <div class="form-group col-md-6">
                                                            <label for="inputCity">City</label>
                                                            <input type="text" class="form-control" id="inputCity">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="exampleFormControlSelect1">State</label>
                                                            <select class="custom-select" id="exampleFormControlSelect3">
                                                                <option selected>Choose...</option>
                                                                <option>Example 1</option>
                                                                <option>Example 2</option>
                                                            </select>
                                                        </div>
                                                        <div class="form-group col-md-2">
                                                            <label for="inputZip">Zip</label>
                                                            <input type="text" class="form-control" id="inputZip">
                                                        </div>
                                                    </div>
                                                    <div class="form-check mb-3">
                                                        <label class="form-check-label">
                                                            <input class="form-check-input" type="checkbox">
                                                            <span class="form-check-sign"></span>
                                                            Rememeber me
                                                        </label>
                                                    </div>
                                                    <button type="submit" class="btn btn-secondary">Sign in</button>
                                                </form>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-24" role="tabpanel" aria-labelledby="tab-content-24">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;form&gt;
&lt;div class=&quot;form-row&quot;&gt;
    &lt;div class=&quot;form-group col-md-6&quot;&gt;
        &lt;div class=&quot;input-group&quot;&gt;
            &lt;div class=&quot;input-group-prepend&quot;&gt;
                &lt;span class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;fas fa-at&quot;&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;/div&gt;
            &lt;input class=&quot;form-control&quot; placeholder=&quot;Email&quot; type=&quot;email&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group col-md-6&quot;&gt;
        &lt;div class=&quot;input-group&quot;&gt;
            &lt;div class=&quot;input-group-prepend&quot;&gt;
                &lt;span class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;fas fa-unlock-alt&quot;&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;/div&gt;
            &lt;input class=&quot;form-control&quot; placeholder=&quot;Password&quot; type=&quot;password&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
    &lt;label for=&quot;inputAddress&quot;&gt;Address&lt;/label&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;inputAddress&quot; placeholder=&quot;1234 Timisoara St&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;form-row&quot;&gt;
    &lt;div class=&quot;form-group col-md-6&quot;&gt;
        &lt;label for=&quot;inputCity&quot;&gt;City&lt;/label&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;inputCity&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;label for=&quot;exampleFormControlSelect1&quot;&gt;State&lt;/label&gt;
        &lt;select class=&quot;custom-select&quot; id=&quot;exampleFormControlSelect1&quot;&gt;
            &lt;option selected&gt;Choose...&lt;/option&gt;
            &lt;option&gt;Example 1&lt;/option&gt;
            &lt;option&gt;Example 2&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group col-md-2&quot;&gt;
        &lt;label for=&quot;inputZip&quot;&gt;Zip&lt;/label&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;inputZip&quot;&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;form-check mb-3&quot;&gt;
    &lt;label class=&quot;form-check-label&quot;&gt;
        &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot;&gt;
        &lt;span class=&quot;form-check-sign&quot;&gt;&lt;/span&gt;
        Rememeber me
    &lt;/label&gt;
&lt;/div&gt;
&lt;button type=&quot;submit&quot; class=&quot;btn btn-secondary&quot;&gt;Sign in&lt;/button&gt;
&lt;/form&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <!-- End of Tab -->
                    </div>
                    <div class="col-xl-2 col-lg-3 d-none d-lg-block py-md-1 doc-sidebar border-left">
                        <ul class="nav flex-column">
                            <li class="nav-item">
                                <a href="#overview" class="nav-link" data-smooth-scroll>Overview</a>
                            </li>
                            <li class="nav-item">
                                <a href="#form-controls" class="nav-link " data-smooth-scroll>Form controls</a>
                            </li>
                            <li class="nav-item">
                                <a href="#sizing" class="nav-link " data-smooth-scroll>Sizing</a>
                            </li>
                            <li class="nav-item">
                                <a href="#custom-form" class="nav-link " data-smooth-scroll>Custom forms</a>
                            </li>
                            <li class="nav-item">
                                <a href="#checkboxes-and-radios" class="nav-link " data-smooth-scroll>Checkbox and
                                    radio</a>
                            </li>
                            <li class="nav-item">
                                <a href="#custom-switch" class="nav-link " data-smooth-scroll>Switch</a>
                            </li>
                            <li class="nav-item">
                                <a href="#range-sliders" class="nav-link " data-smooth-scroll>Range sliders</a>
                            </li>
                            <li class="nav-item">
                                <a href="#tags-input" class="nav-link " data-smooth-scroll>Tags input</a>
                            </li>
                            <li class="nav-item">
                                <a href="#complex-layout" class="nav-link " data-smooth-scroll>Form row</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- End of content -->
            </div>
        </div>
    </section>
    @@include('./_scripts.html', {
        "path": "../.."
    })
</body>

</html>